<template>
  <el-dialog v-model="open">
    <div class="flex gap-2">
      <el-tag v-for="item in data.targetIds" :key="item.targetId" closable @close="removeTarget(item.id)">
        {{ item.title }}
        <hr>
        <el-input v-model="item.relateDes"></el-input>
      </el-tag>
    </div>
    <hr />
    <div class="table-box">
      <ProTable
          ref="proTableRef"
          title="详情页模板头部"
          :indent="20"
          :columns="columns"
          :search-columns="searchColumns"
          :request-api="getTableList"
          row-key="id"
      >
        <template #operation="{ row }">
          <el-button
              type="primary"
              link
              :icon="EditPen"
              @click="updateActor(row.id)"
          >
            设置头像
          </el-button>
        </template>
      </ProTable>
    </div>

    <template #footer>
      <el-button @click="open = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {h, reactive, ref, watch} from 'vue'
import ProTable from '@/components/ProTable/index.vue'
import {
  getDetailModeHeadListApi, getDetailModeHeadListWithFetterApi,
} from "@/api/modules/detailModel/detailModeHead";
import type {ColumnProps, ProTableInstance, SearchProps} from '@/components/ProTable/interface';
import type { DetailModeHeadQuery, DetailModeHeadRow} from '@/api/types/detailmodel/detailModeHead';
import ActorShow from "@/views/novel/character/components/down/ActorShow.vue";
import {EditPen} from "@element-plus/icons-vue";
import {
  createCharacterFetterWithHeadApi,
  getCharacterFetterWithHeadListApi
} from "@/api/modules/character/characterFetter";
import type {CharacterFetterForm} from "@/api/types/character/characterFetter";
import {ElMessage} from "element-plus";

defineOptions({
  name: 'DetailModeHeadView'
})
let open = ref(false);
//friends family
let mode = ref('family')

let props = defineProps({
  masterId: Number
})

let data = reactive({
  targetIds: []
})


let emit = defineEmits(['openActorPicker','refreshActor'])



const proTableRef = ref<ProTableInstance>();
// 表格配置项
const columns: ColumnProps<DetailModeHeadRow>[] = [
  {type: 'selection', width: 80},
  {
    prop: 'title', label: '头像',
    render: (params: any) => {
      return h(ActorShow, {
        text: params.row.title,
        ext1: params.row.ext1
      })
    },},
  {prop: 'title', label: '姓名'},
  {prop: 'titleUnder', label: '描述'},
  {prop: 'operation', label: '操作', width: 250, fixed: 'right'}
]
// 搜索条件项
const searchColumns: SearchProps[] = [
  {prop: 'title', label: '标题', el: 'input'},
  {prop: 'titleUnder', label: '标题注释', el: 'input'},
  {prop: 'status', label: '状态', el: 'select'},
  {prop: 'context', label: '简介', el: 'input'},
  {prop: 'musicFile', label: '主体音乐文件ID', el: 'input'},
]
// 获取table列表
const getTableList = (params: DetailModeHeadQuery) => {
  let query : CharacterFetterForm ={
    belongId: props.masterId,
    type: mode.value
  }
  getCharacterFetterWithHeadListApi(query).then((res)=>{
    data.targetIds = res?.data?.rows
    proTableRef.value?.defaultSelect(res?.data?.rows)
  })

  let newParams = formatParams(params) || {};
  newParams.belongId = props.masterId;
  newParams.type = mode.value;
  return getDetailModeHeadListWithFetterApi(newParams);
};
const formatParams = (params: DetailModeHeadQuery) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return newParams;
}

let updateActor = (id: any)=>{
  // let update : DetailModeHeadForm ={
  //    id : id,
  //    ext1 : id
  // }
  // createDetailModeHeadApi()
  emit('openActorPicker',id)
  getTableList(null)
}


let handleSubmit = () => {

  createCharacterFetterWithHeadApi(data.targetIds).then(response => {
    ElMessage.success('保存成功')
    open.value = false;
    emit('refreshActor')
  })
}


let openHeadSelectDialog = (type: any) => {
  mode.value = type
  getTableList(null)
  open.value = true;
}

let removeTarget = (targetId: any) => {

 let targetIds = data.targetIds.filter(s=>s.targetId !== targetId)
  console.log('targetIdstargetIdstargetIds',targetIds)
  data.targetIds = targetIds
  proTableRef?.value?.defaultSelect(data.targetIds);
}

watch(() => proTableRef.value?.selectedList,
    (newvalue: any) => {
        //data.showImages.values = newvalue
      // let fetters = newvalue.map((item : any) =>{
      //    let save : CharacterFetterForm ={
      //      id: item?.selfId || null,
      //      belongId: props?.masterId,
      //      type: mode.value,
      //      ext: item.id,
      //      ext2: item.ext2
      //    }
      //    return save
      // });
      console.log('newvaluenewvaluenewvalue',newvalue)
      data.targetIds = newvalue
      // proTableRef?.value?.defaultSelect(data.targetIds);

    });


defineExpose({openHeadSelectDialog})


</script>